<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				border-collapse: collapse;
			}
			td{
				border:1px solid lightgray;
				padding:10px
			}
		</style>
	</head>
	<body>
		<table id="myTbl">
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
				<td>1-4</td>
				<td>1-5</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
				<td>2-5</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
				<td>3-4</td>
				<td>3-5</td>
			</tr>
		</table>
		<script>
			var tbl = document.getElementById("myTbl");
			var editingElement = null;
			var editingElementOldValue = "";
			tbl.addEventListener("dblclick", function(){
				var target = window.event.target;
				if(target.tagName.toLowerCase() != "td"){
					return;
				}
				if(editingElement){			// 取消原先的被编辑元素
					editingElement.innerHTML = editingElementOldValue;
				}
				
				editingElementOldValue = target.innerHTML;
				
				var txt = document.createElement("input");
				txt.type = "text";
				txt.value = target.innerHTML;
				txt.setAttribute("onkeyup", "cancelEdit()");
				target.innerHTML = "";
				target.appendChild(txt);
				txt.select();
				
				editingElement = target;
			});
			
			function cancelEdit(){
				var txt = window.event.target;
				var td = txt.parentElement;
				var keyCode = window.event.keyCode;
				if(keyCode == 27){   // esc键按下
					td.innerHTML = editingElementOldValue;
					editingElement = null;
				} else if(keyCode == 13){	// enter键按下
					td.innerHTML = txt.value;
					editingElement = null;
				}
			}
		</script>
	</body>
</html>
